<template>
	<view class="main">
		<u-navbar title="排行榜" back-icon-color="rgba(0, 0, 0, 1)" :custom-back="gotabpolice"></u-navbar>
		<view class="">
			<view class="tab">
				<u-tabs :list="list1" :current="current" :is-scroll="false" @change="change"
					active-color="rgba(24, 144, 255, 1)" bg-color="#fff" bar-width="188" height="110"></u-tabs>
			</view>
			<u-line color="#c8c8c8" margin="-10rpx 0" />
			<view class="top">
				<headName :data="top_three"></headName>
			</view>
			<!-- <view class="rule">
				<u-parse class="proContent" :html="proStandard"></u-parse>
			</view> -->
		</view>
		<view class="list">
			<scroll-view scroll-y="true" :style="{height:scrollviewHeight}">
				<view v-for="(item,index) in pages" :key="index">
					<view class="_li" v-if="index < 3">
						<u-image :src="`../../static/image/icon_${index}.png`" width="40rpx" height="42rpx"></u-image>
						<u-image :src="item.user.avatar" shape="circle" width="64rpx" height="64rpx">
						</u-image>
						<p style="font-size: 32rpx;" class="lable-info">{{item.user.name}}</p>
						<!-- <p style="font-size: 28rpx;color: rgba(119, 119, 112, 1);width: 170rpx;text-align: center;">{{item.user.mobile}}</p> -->
						<p style="font-size: 28rpx;color: rgba(24, 144, 255, 1);text-align: center;"><text
								style="font-size: 34rpx;">{{item.sum_money}}</text>元</p>
					</view>
					<view class="_li" v-else>
						<p style="width: 40rpx;line-height: 42rpx;font-size: 30rpx;text-align: center;">{{index + 1}}
						</p>
						<u-image :src="item.user.avatar" shape="circle" width="64rpx" height="64rpx">
						</u-image>
						<p style="font-size: 32rpx;" class="lable-info">{{item.user.name}}</p>
						<!-- <p style="font-size: 28rpx;color: rgba(119, 119, 112, 1);width: 170rpx;text-align: center;">{{item.user.mobile}}</p> -->
						<p style="font-size: 28rpx;color: rgba(24, 144, 255, 1);text-align: center;"><text
								style="font-size: 34rpx;">{{item.sum_money}}</text>元</p>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import headName from './component/head.vue'
	export default {
		components: {
			headName
		},
		data() {
			return {
				list1: [{
					name: '总排行榜',
				}, {
					name: '月排行榜',
				}],
				top_three: [],
				current: 0,
				show: true,
				type: 'all',
				pages: [],
				scrollviewHeight: '',
				proStandard:'',
				proStand:''
			}
		},
		methods: {
			change(index) {
				this.current = index
				if (index == 0) {
					this.show = true;
					this.type = "all";
					this.getlist()
				} else {
					this.show = false;
					this.type = "month";
					this.getlist()
				}
			},
			gotabpolice() {
				// console.log(8888888888)
			},
			// 得到全部数据
			getlist(callback) {
				this.$u.api.getRanking({
					type: this.type
				}).then(res => {
					this.top_three = res.data.top_three;
					this.pages = res.data.top_six;
					this.proStandard = res.data.text;
					callback && callback()
				})
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.current = 0;
				this.type = 'all';
				this.getlist(() => {
					uni.stopPullDownRefresh()
				})
			}
		},
		onLoad() {
			this.getlist()
			uni.getSystemInfo({
				success: (res) => {
					// 获取手机状态栏高度
					this.statusBarHeight = res.statusBarHeight;
					this.scrollviewHeight = `calc(100vh - 88rpx - 500rpx - 50px - ${this.statusBarHeight}px)`;
				}
			});
		}
	}
</script>

<style scoped lang="scss">
	.tab {
		padding: 0 140rpx;
	}

	.top {
		padding: 0 20rpx;
		margin-top: 68rpx;
	}

	.rule {
		height: 208rpx;
		width: 100%;
		padding: 20rpx;
		background-color: rgba(104, 182, 255, 1);
		color: #FFFFFF;
		font-size: 26rpx;
		line-height: 36rpx;
	}

	.lable-info {
		width: 130rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		text-align: center;
	}

	.list {
		padding: 0 20rpx;

		._li {
			height: 104rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
		}
	}

	/deep/.u-scroll-box .u-tab-item {
		font-weight: bold;
	}

	/deep/.u-title {
		font-weight: bold !important;
		color: rgba(51, 51, 51, 1) !important;
	}
</style>
